<template>
    <gd-row style="display:flex;justify-content:center;align-items:center;width: 100%;height:100%;">
        <div class="biz-comp-lefttree-container" v-if="hasTree">
            <div class="label-conatiner" @click="onEnterNextSetup('biz-comp')">
                <el-tooltip effect="dark" content="点击编辑CRUD组件" placement="bottom">
                    <div class="label-content"><gd-icon icon-name="edit"></gd-icon>左树组件</div>
                </el-tooltip>
            </div>
        </div>
        <gd-row style="flex-grow: 1;min-width:0;word-break:break-all;height:100%;display:flex;flex-direction:column;">
            <div class="biz-comp-sub-container slot top" :class="{ active: activeSlots.includes('top') }">
                <div class="label-conatiner">表格上方插槽</div>
            </div>
            <div class="biz-comp-sub-container" style="border-top:none;border-bottom:none;flex-grow: 1;">
                <el-tooltip effect="dark" :content="`点击${activeSlots.includes('top') ? '移除' : '添加'}上方插槽`"
                    placement="bottom">
                    <div class="top-add-container" @click="onClickSlot('top')">
                        <gd-icon :icon-name="activeSlots.includes('top') ? 'minus' : 'plus'"></gd-icon>
                    </div>
                </el-tooltip>
                <div class="label-conatiner" @click="onEnterNextSetup('biz-comp')">
                    <el-tooltip effect="dark" content="点击编辑CRUD组件" placement="bottom">
                        <div class="label-content"><gd-icon icon-name="edit" style="line-height:100%;"></gd-icon>{{
                            hasTree? '右表组件': '表格组件'
                        }}
                        </div>
                    </el-tooltip>
                </div>
                <el-tooltip effect="dark" :content="`点击${activeSlots.includes('bottom') ? '移除' : '添加'}下方插槽`"
                    placement="bottom">
                    <div class="bottom-add-container" @click="onClickSlot('bottom')">
                        <gd-icon :icon-name="activeSlots.includes('bottom') ? 'minus' : 'plus'"></gd-icon>
                    </div>
                </el-tooltip>
            </div>
            <div class="biz-comp-sub-container slot bottom" :class="{ active: activeSlots.includes('bottom') }">
                <div class="label-conatiner">表格下方插槽</div>
            </div>
        </gd-row>
    </gd-row>
</template>
<script setup>
import { computed, ref, reactive } from "vue"
import { useStore } from "@gd-accbuild-core/store/hackVueStore"
const _store = useStore()
const props = defineProps({
    layoutConfig: {
        type: Object,
    }
})
const hasTree = computed(() => {
    return props.layoutConfig?.compKey.endsWith("_filter")
})
const activeSlots = reactive([])
const onClickSlot = (val) => {
    console.log(val)
    const matchedIdx = activeSlots.findIndex(el => el === val)
    if (matchedIdx >= 0) {
        activeSlots.splice(matchedIdx, 1)
    } else {
        activeSlots.push(val)
    }
}
const onEnterNextSetup = (val) => {
    _store.dispatch("designerEngine/setCurDragCompConfig_canvasRenderType", {canvasRenderType:val})
}
</script>
<style lang="scss" scoped>
.biz-comp-lefttree-container {
    width: 230px;
    border: 0.5px dashed #006cff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.biz-comp-sub-container {
    width: 100%;
    border: 0.5px dashed #006cff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    .top-add-container,
    .bottom-add-container {
        height: 30px;
        line-height: 30px;
        width: 100%;
        cursor: pointer;
        border: 0.5px dashed #006cff;
    }

    .top-add-container {
        //border-top: none;
    }

    .bottom-add-container {
        //border-top: none;
    }


}

.label-conatiner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .label-content {
        height: 25px;
        line-height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &:hover {
        cursor: pointer;
        color: #409EFF !important;
    }
}


.slot {
    height: calc(100px - 2px);
    display: none;

    &.active {
        display: block;
    }

    &.top.active {
        border-bottom: none;
    }

    &.bottom.active {
        border-top: none;
    }
}
</style>